<template>
  <div>
    <van-nav-bar title="个人信息" @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <div class="kuaiyi">
      <div class="touxiang">
        <van-uploader style="display: block" :after-read="afterRead">
          <van-cell title="头像" is-link center>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #default>
              <van-image width="50" height="50" :src="headimg" />
            </template>
          </van-cell>
        </van-uploader>
      </div>

      <van-cell
        v-for="(item, index) in cell_list"
        :key="index"
        class="celler"
        :title="item.title"
        :value="item.miaoshu"
        is-link
        center
        @click="tiaozhuan(item.title, item.miaoshu, item.a)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {
      
      headimg: "https://img01.yzcdn.cn/vant/cat.jpeg",
      waimai: "",
      formdata: new FormData(),
      cell_list: [
        {
          title: "昵称",
          miaoshu: "W2996942171",
          a: "",
        },
        {
          title: "生日",
          miaoshu: "2001-02-07",
          a: new Date(),
        },
        {
          title: "收货地址",
          miaoshu: "修改/添加",
          a: "",
        },
      ],
    };
  },
  created() {
      var select_user_id = JSON.parse(localStorage.getItem("waimai")).user_id;
      this.axios({
        method: "post",
        url: "http://localhost:3000/update_information",
        data: { select_user_id: select_user_id },
      })
        .then((res) => {
          console.log(res.data.data[0]);
          this.waimai = res.data.data[0];
          this.headimg = this.waimai.user_headimg;
          this.cell_list[0].miaoshu = this.waimai.user_name;
          this.cell_list[1].miaoshu = this.waimai.user_birthday;
        })
        .catch((err) => {
          console.log(err);
        });
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    tiaozhuan(cc, dd, gg) {
      if (cc == "收货地址") {
        this.$router.push("/re_address");
      } else if (cc == "昵称") {
        this.$router.push({
          name: "usernameedit",
          params: {
            username: dd,
          },
        });
      } else if (cc == "生日") {
        this.$router.push({
          name: "userbirthday",
          params: {
            birthday: gg,
          },
        });
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file.file);
      this.formdata.append("user_headimg", file.file);
      this.formdata.append("user_id", this.waimai.user_id)
      this.axios({
        method: "post",
        url: "http://localhost:3000/up_headimg",
        data: this.formdata,
      })
        .then((res) => {
          this.$nextTick(() => {
            this.headimg = res.data.img_path
          })
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

};
</script>

<style scoped>
.van-icon {
  color: black;
}

.kuaiyi {
  margin-top: 10px;
}

.cellyi {
  height: 60px;
}

.celler {
  border-top: 0.5px solid rgb(238, 237, 237);
}

/deep/.van-image__img {
  border-radius: 50%;
  margin-top: 5px;
}

.touxiang {
  width: 100%;
}

/deep/.van-uploader__wrapper {
  display: block;
}
</style>